<template>
  <div >
    <h1>
      发现音乐
    </h1>
    <!-- 今日热点音乐（非个性化）推荐 -->
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe> -->

<van-image src="http://rul4y8e5f.hn-bkt.clouddn.com/主页.png"></van-image>


<!-- <MusicPlayList></MusicPlayList> -->
<!-- <MusicAllInfo></MusicAllInfo> -->

<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" >
    </van-cell>
  </van-list>
</van-pull-refresh> -->
<div>
  <!-- <MusicInfo2list>
    
</MusicInfo2list> -->
</div>

<!-- 个性化推荐 -->
<div></div>

</div>
</template>

<script>
 import MusicPlayList from './MusicPlayList.vue';
 import MusicInfo2list from './info/MusicInfo2list.vue'
 import MusicAllInfo from './info/MusicAllInfo.vue';

export default {
 name: 'findMusic',


 components: {
  MusicPlayList,
  MusicInfo2list,
  MusicAllInfo
 },
  data() {

    return {

      hotMusic: {

      },
      test:true,
      // test:false,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,

    }
  },

  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },

}
</script>

<style lang="less">
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

 
</style>